<template>
  <el-popover
    popper-class="filter-tootip-warp  multi-select-warp"
    :placeholder="placement"
    v-model="visible"
    @after-leave="reShowFilterData()"
    @show="domMouseDownHideFunc"
  >
    <i slot="reference" class="el-icon-caret-bottom" :class="{ active: active }"></i>
    <el-input
      v-if="(data || []).length > 10"
      placeholder="请输入搜索内容"
      style="margin:10px 10px 5px;width:calc(100%-20px)"
      size="mini"
      suffix-icon="el-icon-search"
      v-model="keywrod"
    ></el-input>
    <el-checkbox-group v-model="checkedArr" size="mini">
      <el-checkbox
        size="mini"
        v-for="(item, index) in list"
        :label="item.value"
        class="list-item"
        :key="index"
        >{{ item.text }}</el-checkbox
      >
    </el-checkbox-group>
    <div class="footer-btns border-top" style="padding:5px 10px">
      <el-button size="mini" @click="doCancel">重置</el-button>
      <el-button size="mini" :disabled="list.length === 0" type="primary" @click="doConfirm"
        >确定</el-button
      >
    </div>
  </el-popover>
</template>
<script>
export default {
  name: 'checkList',
  data() {
    return {
      checkedArr: [],
      visible: false,
      active: false,
      keywrod: '',
      list: (this.data || []).slice(0)
    };
  },
  props: {
    placement: {
      default: function() {
        return 'bottom';
      }
    },
    search: {
      default: function() {
        return false;
      }
    },
    checkedList: {
      default: function() {
        return [];
      }
    },
    data: {
      default: function() {
        return [];
      }
    }
  },

  mounted() {
    console.log(this.checkedList);
    this.list = (this.data || []).slice(0);
    this.active = (this.checkedList || []).length > 0;
    this.checkedArr = (this.checkedList || []).length === 0 ? [] : this.checkedList;
  },
  watch: {
    checkedList(val) {
      this.active = val.length > 0;
      this.checkedArr = val.length === 0 ? [] : val;
    },
    data(list) {
      this.list = (list || []).slice(0);
    },
    keywrod(val) {
      this.list = (this.data || []).filter(item => {
        return (item.text || '').indexOf(val) > -1;
      });
      this.checkedArr = [];
    }
  },
  methods: {
    domMouseDownHideFunc() {
      document.getElementById('app').addEventListener('mousedown', this.hidePanel, false);
    },
    reShowFilterData() {
      this.checkedArr = (this.checkedList || []).length === 0 ? [] : this.checkedList;
      document.getElementById('app').removeEventListener('mousedown', this.hidePanel, false);
    },
    hidePanel() {
      this.visible = false;
    },
    doConfirm() {
      this.$emit('update:checkedList', this.checkedArr);
      this.visible = false;
      this.active = this.checkedArr.length > 0;
    },
    doCancel() {
      this.keywrod = '';
      this.checkedArr = [];
      this.active = false;
      this.visible = false;
      this.$emit('update:checkedList', []);
    }
  }
};
</script>
<style scoped>
.active {
  color: blue;
}
</style>
<style>
.muti-select-wrap .el-input_inner {
  padding-left: 0;
  text-indent: 10px;
}
</style>
